@use '@styles/variables.scss' as *;

.console {
  --card-spacing: 20px;

  // 卡片头部
  :deep(.card-header) {
    display: flex;
    justify-content: space-between;
    padding: 20px 25px 5px 0;

    .title {

      h4 {
        font-size: 18px;
        font-weight: 500;
        color: var(--art-gray-900) !important;
      }

      p {
        margin-top: 3px;
        font-size: 13px;
        color: var(--art-gray-600) !important;

        span {
          margin-left: 10px;
          color: #52c41a;
        }
      }
    }
  }

  :deep(.icon-text-widget) {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;

    // .item {
    //   display: flex;
    //   align-items: center;

    //   .icon {
    //     display: flex;
    //     align-items: center;
    //     justify-content: center;
    //     width: 42px;
    //     height: 42px;
    //     margin-right: 10px;
    //     line-height: 42px;
    //     color: var(--main-color);
    //     background-color: var(--el-color-primary-light-9);
    //     border-radius: 8px;

    //     i {
    //       font-size: 20px;
    //     }
    //   }

    .content {
      text-align: center;

      p {
        margin-bottom: 10px;
        font-size: 18px;
      }

      span {
        font-size: 14px;
      }
    }

    // }
  }

  // 设置卡片背景色、圆角、间隙
  :deep(.card-list .card),
  .card {
    margin-bottom: var(--card-spacing);
    background: var(--art-main-bg-color);
    border-radius: calc(var(--custom-radius) + 4px) !important;
  }

  @media screen and (max-width: $device-phone) {
    --card-spacing: 15px;
  }
}